import { MdDialog, MdDialogRef, MdDialogConfig, MdSnackBar } from "@angular/material";
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { MessageBoxService, GrowlMessageType } from "../../../component/index";

export class OpenTableService {
    static Current: OpenTableService = new OpenTableService();
    private tableTemp: OpenTableDialog;
    dialogRef: MdDialogRef<OpenTableDialog>;
    config: MdDialogConfig = {
        disableClose: false,
        width: '100%',
        position: {
            top: '',
            bottom: '0',
            left: '',
            right: ''
        }
    }
    Regist(tableTemp: OpenTableDialog) {
        this.tableTemp = tableTemp;
    }

    open(dialog: MdDialog, currentTable) {
        this.dialogRef = dialog.open(OpenTableDialog, this.config);
        this.tableTemp.currentTable = currentTable;
        this.tableTemp.personNum = currentTable.capacity ? currentTable.capacity + "" : "0";
        this.tableTemp.firstCheck = true;
        return new Promise<any>((resolve, reject) => {
            this.dialogRef.afterClosed().subscribe((qty) => {
                this.dialogRef = null;
                resolve(qty);
            });
        });
    }

}

@Component({
    //moduleId: module.id,
    selector: 'div[open-table]',
    template: `
        <md-dialog-title>
            <div tabindex="0" autofocus fxLayout="row" fxLayoutAlign="start center" class="open-table-header">
                <span fxFlex="100%" class="padding-l-s">{{currentTable.name}}</span>
                <span class="noshrink padding-r-s color-primary">开台</span>
            </div>
        </md-dialog-title>
        <md-dialog-content>
            <div fxLayout="column">
                <div fxLayout="column" class="open-table-count">
                    <div fxLayout="row" fxLayoutAlign="start center" class="open-table-num noshrink margin-l-s margin-r-s v-gap">
                        <span class="noshrink">顾客人数：</span>
                        <span fxFlex="100%">{{personNum}}</span>
                        <span class="i-clear noshrink" (click)="onClean()"></span>
                    </div>
                    <div fxFlex="100%" fxLayout="column" fxLayoutAlign="center start" class="open-table-panel">
                        <div fxLayout="row" fxLayoutAlign="space-between" class="pct100">
                            <div fxLayout="row" fxLayoutAlign="center center" class="open-table-numbtn" *ngFor="let numA of numsPre" (click)="onSelectPerson(numA)">
                                {{numA}}
                            </div>
                        </div>
                        <div fxLayout="row" fxLayoutAlign="space-between" class="pct100">
                            <div fxLayout="row" fxLayoutAlign="center center" class="open-table-numbtn" *ngFor="let numB of numsNext" (click)="onSelectPerson(numB)">
                                {{numB}}
                            </div>
                        </div>
                    </div>
                </div>
                <button md-button (click)="ok()" class="normal-btn bgcolor-primary text-m">
                    <span class="color-white">开台</span>
                </button>
            </div>
        </md-dialog-content>
    `,
    styleUrls: ['../table.component.scss']
})
export class OpenTableDialog {

    constructor(
        private msgSvr: MessageBoxService,
        public dialogRef: MdDialogRef<OpenTableDialog>,
        public snackBar: MdSnackBar
    ) {
        OpenTableService.Current.Regist(this);
    }

    currentTable = <any>{};
    firstCheck: boolean = true;
    numsPre = [1, 2, 3, 4, 5];
    numsNext = [6, 7, 8, 9, 0];
    snackBarRef = null;
    personNum = "0";

    onClean() {
        this.personNum = "0";
    }

    onSelectPerson(count: number) {
        if (this.firstCheck) {
            this.personNum = "";
        }
        this.firstCheck = false;
        if (this.personNum == "0") {
            this.personNum = "";
        }
        let result = this.personNum + count;
        if (!Number(result) || Number(result) > 10000) {
            if (!this.snackBarRef) {
                this.snackBarRef = this.msgSvr.Growl(GrowlMessageType.Warning, this.snackBar, "请填写正确的人数【1-10000】");
                this.snackBarRef.afterDismissed().subscribe(() => {
                    this.snackBarRef = null;
                });
            }
            return;
        }
        this.personNum += count;
    }

    cancel() {
        this.dialogRef.close();
    }

    ok() {
        let num = Number(this.personNum);
        if (!num || num < 0 || num > 10000) {
            if (!this.snackBarRef) {
                this.snackBarRef = this.msgSvr.Growl(GrowlMessageType.Warning, this.snackBar, "开台失败，请填写正确的人数【1-10000】");
                this.snackBarRef.afterDismissed().subscribe(() => {
                    this.snackBarRef = null;
                });
            }
            return;
        }
        this.dialogRef.close(this.personNum);
    }
}